<template>
    <div class="login">
        <div class="left-contener"><left-main /></div>
        <div class="right-contener"><right-main /></div>
    </div>
</template>
<script>
import LeftMain from './components/leftMain.vue'
import RightMain from './components/rightMain.vue'
export default {
    components: {
        LeftMain,
        RightMain
    }
}
</script>
<style lang="scss" scoped>
.login {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: row,
        $justify: flex-start,
        $align: flex-start
    );
    .left-contener {
        @include box_flex(
            $width: 50%,
            $height: 100%,
            $direction: row,
            $justify: center,
            $align: center
        );
        @include background_color('cover');

        position: relative;
    }
    .right-contener {
        @include box_flex(
            $width: 50%,
            $height: 100%,
            $direction: row,
            $justify: center,
            $align: center
        );
        @include background_color('cover1');

        position: relative;
    }
}
</style>
